<template>
  <div class="com-container">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chinaJson from '@/assets/map/china.json'

export default {
  name: 'FYMap',
  data () {
    return {
      chartInstance: null,
      mapData: [
        { name: '北京', value: 126 },
        { name: '天津', value: 85 },
        { name: '河北', value: 142 },
        { name: '山西', value: 98 },
        { name: '内蒙古', value: 76 },
        { name: '辽宁', value: 112 },
        { name: '吉林', value: 89 },
        { name: '黑龙江', value: 95 },
        { name: '上海', value: 92 },
        { name: '江苏', value: 168 },
        { name: '浙江', value: 186 },
        { name: '安徽', value: 142 },
        { name: '福建', value: 156 },
        { name: '江西', value: 132 },
        { name: '山东', value: 178 },
        { name: '河南', value: 158 },
        { name: '湖北', value: 145 },
        { name: '湖南', value: 152 },
        { name: '广东', value: 172 },
        { name: '广西', value: 134 },
        { name: '海南', value: 68 },
        { name: '重庆', value: 89 },
        { name: '四川', value: 165 },
        { name: '贵州', value: 112 },
        { name: '云南', value: 128 },
        { name: '西藏', value: 76 },
        { name: '陕西', value: 132 },
        { name: '甘肃', value: 96 },
        { name: '青海', value: 58 },
        { name: '宁夏', value: 45 },
        { name: '新疆', value: 89 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 }
      ]
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.resize)
  },
  mounted () {
    echarts.registerMap('china', chinaJson)
    this.initChart()
    this.updateChart()
    window.addEventListener('resize', this.resize)
  },
  methods: {
    initChart () {
      this.chartInstance = echarts.init(this.$refs.map_ref, null, {
        renderer: 'canvas'
      })
    },
    updateChart () {
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '非遗项目地理分布',
          subtext: '数据来源：中国非物质文化遗产网',
          left: 'center',
          textStyle: {
            color: '#000',
            fontSize: 16,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#000',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>非遗项目数量：{c}个',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: '#fff',
          textStyle: {
            color: '#fff'
          }
        },
        visualMap: {
          min: 0,
          max: 200,
          text: ['多', '少'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          },
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '非遗项目数量',
            type: 'map',
            map: 'china',
            aspectScale: 0.75,
            zoom: 1.2,
            roam: true,
            emphasis: {
              label: {
                show: true,
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#ffd700'
              }
            },
            select: {
              label: {
                show: true,
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#ffd700'
              }
            },
            data: this.mapData
          }
        ]
      }
      this.chartInstance.setOption(option)
    },
    resize () {
      this.chartInstance && this.chartInstance.resize()
    }
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
</style> 